<!DOCTYPE html>
<html style="font-size: 100px;" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>详细</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        a {
            text-decoration: none;
            color: black;
        }
        .header {
            display: flex;
            flex-direction: row;
            padding: .25rem 0.1rem 0.18rem 0.1rem;
        }
        .header .title {
            font-size: 16px;
            font-weight: bold;
            color: #5B5D5C;
            margin-left: 0.2rem;
        }

        .content {
            display: flex;
            flex-direction: row;
        }

        .content .content-img {
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            margin-right: 0.1rem;
        }

        .content-info .info-name {
            font-size: 14px;
            color: rgb(80, 80, 80);
            font-weight: bold;
            margin-bottom: 0.05rem;
            margin-top: 0.2rem;
        }

        .content-info .info-timeArea {
            font-size: 12px;
        }
        em 0.1rem 0.1r
        .content-info .info-timeArea .time,
        .content-info .info-timeArea .tag {
            font-size: 12px;
            color: #858585;
        }

        .content-info .info-timeArea .su {
            font-size: 10px;
            color: #eeeeee;
            padding: 0rem .05rem;
        }

        .content-body {
            font-size: 19px;
            color: #1f1f1f;
            padding: 0rem .1rem;
            margin-top: .15rem;
            letter-spacing: 2px;
            line-height: 1.5;
        }

        .content-body img {
            padding: .15rem 0rem;
            width: 100%;
        }

        .bottom-hr {
            width: 100%;
            height: 1px;
            background-color: #eeeeee;
            margin: .1rem 0rem .05rem 0rem
        }
        .comment-content{
            border-radius: 0.2rem;
            background-color: #DEECEB;
            font-size: 14px;
            padding: 0.1rem 0.13rem 0.1rem 0.13rem;
            margin-top: 0.1rem;
            margin-bottom: 0.25rem;
        }
        body{
            background-color: #DEECEB;
        }
        .body {
            display: flex;
            flex-direction: column;
            margin: 0 0.1rem 0 0.1rem;
            padding: 0.14rem 0.06rem 0.14rem 0.06rem ;
            border-radius: 0.1rem;
            background-color: #ffffff;
        }
        .body .t1 {
            font-size: 14px;
            color: rgb(80, 80, 80);
            font-weight: bold;
        }
        .body .p1 {
            font-size: 14px;
        }

        .body img {
            width: 100%;
            margin: 0.05rem 0 0.05rem 0;
        }
        .comment-top{
            margin-left: 10px;
            padding: 0rem .1rem;
            font-size: .15rem;
            font-weight: bold;
            margin-top: 0.1rem;
        }
        /*#doComment{*/
        /*    margin-left: 200px;*/
        /*}*/
        button{
            width: 30px;
            font-size: 0.05rem;
        }
        #commentContentInput{
            width: 3.5rem;
            height: 1.12rem;
            margin-left: 0.1rem;
        }
        .comment-item {
            margin: 0.01rem 0.1rem 0.1rem 0.1rem;
            padding: 0.01rem 0.13rem 0.13rem 0.13rem;
        }
        .comment-list{
            background-color: #B1D4D1;
            font-size: 14px;
            padding: 0.1rem 0.13rem 0.1rem 0.13rem;
            margin-top: 0.1rem;
            margin-bottom: 0.25rem;
            border-radius: 0.2rem;
        }

        .comment-input-container ,.comment-input{
            width: 100%;
            height: 0.42rem;
            background-color: #F8F8F8;
            position: fixed;
            bottom: 0rem;
            visibility: visible;
        }
        .comment-input-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            visibility: visible;
        }
        .comment-input {
            height: 1.8rem;
            background-color: #89ADAA;
            visibility: hidden;
        }
        .button-area {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0.08rem 0.1rem 0.08rem 0.1rem;
        }
        .button {
            width: 0.5rem;
            height: 0.30rem;
            background-color: #EEEEEE;
            font-size: 15px;
            text-align: center;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            border-radius: 0.05rem;
        }
        textarea {
            width: 95%;
            height: 0.95rem;
            margin: 0 0.1rem 0 0.1rem;
        }
        .button-driver {
            width: 100%;
            height: 2px;
            background-color: #DFDFDF;
            margin-bottom: 0.1rem;
        }
        .div1 {
            width: 80%;
            height: 0.3rem;
            margin-right: 0.1rem;
            border: 1px solid #E9E9E9;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #AAAAAA;
        }
        .comment-diver {
            display: flex;
            flex-direction: row;
            padding: 0rem 0 0.05rem 0.1rem;
            margin-top: 10px;
        }
        .comment-diver .comment-dirver-tag {
            font-size: 14px;
            color: rgb(80,80,80);
            margin-right: 0.08rem;
            flex-wrap: nowrap;
            width: 15%;
        }
        .comment-diver .diver {
            width: 85%;
            height: 0.21rem;
            background-color: rgb(101, 141, 138);
        }
        .message {
            display: flex;
            flex-direction: row;
            margin-left: 0.1rem;
        }

    </style>
    <script>
        window.onload=function (){

            let div1 = document.getElementsByClassName("div1")[0];
            let commentInputContainer = document.getElementsByClassName("comment-input-container")[0];
            let commentInput = document.getElementsByClassName("comment-input")[0];
            let comment = document.getElementsByClassName("comment")[0];
            let buttonCancel = document.getElementsByClassName("cancel")[0];
            let buttonCertain = document.getElementsByClassName("certain")[0];
            let textComment = document.getElementsByClassName("textComment")[0];

            div1.onclick = function(){  // 跳转评论按钮
                commentInput.style.visibility = "visible";
                commentInputContainer.style.visibility = "hidden";
            }
            buttonCancel.onclick = function(){  // 取消评论按钮
                commentInput.style.visibility = "hidden";
                commentInputContainer.style.visibility = "visible";
            }

            buttonCertain.onclick = function(){  // 发布评论按钮
                onSubComment()
                commentInput.style.visibility = "hidden";
                commentInputContainer.style.visibility = "visible";
            }
            // http://47.108.249.115:8080/LuShuDao0.0.2-1.0-SNAPSHOT/ScenicRelease/findRoamComment
            $.get(
                `http://47.108.249.115:8080/LuShuDao0.0.2-1.0-SNAPSHOT/ScenicRelease/findRoamComment`,
                function(res,status){
                    let commentList = document.getElementById("commentList");
                    console.log("res-find",res)
                    let inHTMLInit="";
                        res.data.commentDetailList.forEach(commentDetail => {
                            inHTMLInit+=`
                        <div class="comment-item">
                            <div class="content">
                                <img class="content-img" src="${commentDetail['commentUserInfo']['userHead']}" />
                                <div class="content-info">
                                    <div class="info-name">${commentDetail['commentUserInfo']['userName']}</div>
                                    <div class="info-timeArea">
                                        <div class="time">${new Date(commentDetail['commentInfo']['commentTime']).toLocaleDateString().replace(/\//g, "-") + " " + new Date(commentDetail['commentInfo']['commentTime']).toTimeString().substr(0, 8)}</div>
                                        <div class="su">|</div>
                                    </div>
                                </div>
                            </div>
                            <span class="comment-content">${commentDetail['commentInfo']['commentContent']}</span>
                        </div>
                        `
                    });
                    commentList.innerHTML=inHTMLInit;
                }).error(function (){
                console.log("出错了");
            });
        }
    </script>
    <script>
        function onSubComment(){
            let contentInput = document.getElementById("commentContentInput");
            let srid = document.getElementById("srid");
            let content = contentInput.value;
            if (content===""){
                console.log("输入框为空")
                return;
            }
            console.log("srid.innerText",srid.innerText);
            contentInput.innerText='';
            $.post(
                "http://47.108.249.115:8080/LuShuDao0.0.2-1.0-SNAPSHOT/ScenicComment/addRoamComment",
                {
                    "content":content,
                    "srid":srid.innerText,
                },
                function(res,status){
                    let commentList = document.getElementById("commentList");
                    // let doCommentButton = document.getElementById("doComment");

                    // doCommentButton.style.visibility="visible";
                    let inHTML="";
                        res.data.commentDetailList.forEach(commentDetail => {
                            inHTML+=`
                        <div class="comment-item">
                            <div class="content">
                                <img class="content-img" src="${commentDetail['commentUserInfo']['userHead']}" />
                                <div class="content-info">
                                    <div class="info-name">${commentDetail['commentUserInfo']['userName']}</div>
                                    <div class="info-timeArea">
                                        <div class="time">${new Date(commentDetail['commentInfo']['commentTime']).toLocaleDateString().replace(/\//g, "-") + " " + new Date(commentDetail['commentInfo']['commentTime']).toTimeString().substr(0, 8)}</div>
                                        <div class="su">|</div>
                                    </div>
                                </div>
                            </div>
                            <span class="comment-content">${commentDetail['commentInfo']['commentContent']}</span>
                        </div>
                        `
                        });
                    commentList.innerHTML=inHTML;
                }).error(function (){
                console.log("出错了");
            });



        }
    </script>

</head>

<body>

<div class="header">
    <p class="title" th:text="${session.title}">
        全球股市集体大反弹：纳指涨2%欧洲股市涨3% 纳斯达克金龙中国指数大涨超20％
    </p>
    <div id="srid" th:text="${session.srid}"></div>
</div>


<div class="comment-input">
    <div class="button-area">
        <div class="button cancel">
            取消
        </div>
        <div class="button certain" >
            发布
        </div>
    </div>
    <div class="button-driver"></div>
    <textarea class="textComment" id="commentContentInput"></textarea>
</div>

<div class="comment-input-container">
    <div class="div1" id="doComment">说说你的看法</div>
<!--    <img class="comment" src="images/comment.png"/>-->
</div>

<div class="content">
    <div class="message">
        <img class="content-img" th:src="${session.headUrl}" />
        <div class="content-info">
            <div class="info-name" th:text="${session.userName}">中国高新技术产业导报</div>
            <div class="info-timeArea">
                <div class="time" th:text="${session.time}"></div>
                <div class="su">|</div>
            </div>
        </div>
    </div>
</div>
<div class="body">
    <div class="content-body p1" th:utext="${session.text}">

    </div>
</div>

<div class="comment-diver">
    <div class="comment-dirver-tag">评论区</div>
    <div class="diver"></div>
</div>


<div class="comment-list" id="commentList">
</div>

</body>
</html>